import React, { Component } from 'react';
import './Findgood.scss'
import { DeleteOutline } from 'antd-mobile-icons'
import { NavBar } from 'antd-mobile'
import { SearchOutline } from 'antd-mobile-icons'
import { good_search, good_hotsearch } from '../utils/api'
class Findgood extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputText: '',
            arr1: ['sk2', 'sk'],
            arr2: [],
        }
    }
    componentDidMount() {
        good_hotsearch().then((res) => {
            console.log(res.data)
            this.setState({ arr2: res.data.list })
        })
    }
    // 如何使用防抖处理?
    handleChange = (e) => {
        this.setState({ inputText: e.target.value })
    }
    handleClick() {
        this.props.history.push({ pathname: '/index/allgood', state: { Text: this.state.inputText } })
    }
    tosearch(element) {
        this.props.history.push({ pathname: '/index/allgood', state: { Text: element } })
    }
    render() {
        return (
            <div>
                <NavBar back='返回' onBack={() => { this.props.history.go(-1) }}>
                    搜索
                </NavBar>
                <div className="inputhead">
                    <div className="inputbox">
                        <SearchOutline fontSize={18} />
                        {/* input搜索框 */}
                        <input type="text" placeholder='搜索店铺内商品' value={this.state.inputText} onChange={(e) => { this.handleChange(e) }} />
                        {/* input搜索框 */}
                    </div>
                    <div className="quxiao" onClick={() => { this.handleClick() }}>搜索</div>
                </div>
                <div className="searchbox">
                    <div className="just">
                        <div className="del">
                            <h3>最近搜索</h3>
                            <DeleteOutline fontSize={18} color='#ccc' />
                        </div>
                        <div className="spanbox">
                            {
                                this.state.arr1.map((element, index) => {
                                    return (
                                        <span key={index}>{element}</span>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="hot">
                        <h3>热门搜索</h3>
                        <div className="spanbox">
                            {
                                this.state.arr2.map((element, index) => {
                                    return (
                                        <span key={index} onClick={() => { this.tosearch(element) }}>{element}</span>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Findgood;